<template>
	<uni-list-item :showArrow="rightIcon">
		<bjx-form-item :prop="prop" :required="required" :label="label" @click="contClick">
			<slot></slot>
		</bjx-form-item>
		<view slot="right"  v-if="showArrow" >
			<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowdown" />
		</view>
	</uni-list-item>
</template>

<script>
	/**
	 * Item 片段
	 * @description uni-list、bjx-form的item组合
	 * @property {String} prop、label 
	 * @property {Boolean} rightIcon（向右箭头 →）、showArrow （向下箭头 ↓）
	 * @property {Boolean} required 是否必填项 
	 * 
	 */
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import bjxFormItem from '@/components/bjx-form/bjx-form-item.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default{
		name:"Item",
		components: {
			uniListItem,
			bjxFormItem,
			uniIcons
		},
		props: {
			required:{
				type: Boolean,
				default: false
			},
			showArrow: {
				// 是否显示向下箭头
				type: [Boolean, String],
				default: false
			},
			rightIcon:{
				type: Boolean,
				default: false
			},
			prop:{
				type:String,
				default:''
			},
			label:{
				type:String,
				default:''
			}
		},
		methods: {
			contClick() {
				this.$emit('click')
			}
		},
	}
</script>

<style>
	.uni-list-item{
		padding: 0 !important;
	}
	.bjx-form-item{
		padding: 0 !important;
	}
</style>
